<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>clientHeight的理解</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#box1 {
				border: 30px #000 solid;
				width: 260px;
				height: 200px;
				margin: 20px 5px;
				line-height: 50px;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div id="box1">

		</div>
		<h1 id="scrollTopVal"></h1>
		<script language="javascript">
			/*
			知识点一：clientHeight 等于元素的内容区域高度 height + padding-top+padding-bottom的
			值。也就是边框以内的总高度，不含边框及margin。  

			知识点二：clientWidth 等于边框以内的总宽度（也就是width+左右padding的总和）
			*/
			scrollTopVal.innerHTML = box1.clientHeight;
			scrollTopVal.innerHTML += "<br>" + box1.clientWidth;
		</script>
	</body>

</html>